<template>
  <div>
    <title-bar
      :titleText="pageTitle"
      :needBorder="true"
      :needBack="false"
    >
    </title-bar>
    <Result
      v-bind="resultInfo"
      @click="close"
    >
    </Result>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui'
import 'mint-ui/lib/indicator/style.css'
import 'mint-ui/lib/spinner/style.css'
import { getUrlParams } from 'vue-xiaobu-utils'
import TitleBar from '@/components/titlebar/TitleBar'
import Result from '@/components/result/Result'
import { back } from '@/utils/JumpUtils.js'
import { getPayResult } from './api/api.js'
import { open } from '../../utils/JumpUtils.js'
import { WAIT_PAY, SUCCESS, FAIL, PROCESSING } from './constants/PayState.js'
export default {
  components: {
    'title-bar': TitleBar,
    Result
  },
  data() {
    return {
      resultInfo: {
        isBtnEnable: false,
        btnText: '关闭'
      },
      pageTitle: '等待支付结果',
      unifyPayNo: '',
      notifyUrl: '', // 支付回调地址
      price: 0,
      searchTime: 0
    }
  },
  mounted() {
    let params = getUrlParams()
    if (params) {
      // 查询结果的统一支付流水号
      this.unifyPayNo = params['unifyPayNo']
      // 修改说明，添加了decodeURIComponent,是因为ios上返回的param并没有decode过,
      // 仍然还是encode过的notifyUrl,如xbapp%3A%2F%2Fgoback%2Fbuscard-app%2Fcardinfo.html
      // 所以这里手动再decode一下
      this.notifyUrl = decodeURIComponent(params['notifyUrl'])
      try {
        // 支付价格
        this.price = parseFloat(params['price']).toFixed(2)
      } catch (error) {
        this.price = 0.00
      }
    }
    Indicator.open({
      text: '结果查询中…',
      spinnerType: 'fading-circle'
    })
    this.searchTime = 0
    this.searchForResult()
  },
  methods: {
    // 查询支付结果
    searchForResult() {
      this.searchTime++
      console.log(this.searchTime, new Date().getTime())
      getPayResult(this.unifyPayNo).then(state => {
        this.parseResult(state)
      }).catch(() => {
        // 如果结果失败则300毫秒后继续查询，查询4次仍失败结束查询
        if (this.searchTime < 4) {
          setTimeout(this.searchForResult, 300)
        } else {
          Indicator.close()
          this.pageTitle = '等待支付结果'
          this.resultInfo = {
            iconState: 0,
            text: '订单支付结果查询中…',
            isBtnEnable: true,
            btnText: '关闭'
          }
        }
      })
    },
    parseResult(state) {
      switch (state) {
        case FAIL: // 失败
          // case -1: // 已退款
          Indicator.close()
          this.pageTitle = '支付失败'
          this.resultInfo = {
            iconState: 2,
            text: '订单支付失败',
            isBtnEnable: true,
            btnText: '关闭'
          }
          break
        case SUCCESS: // 成功
          Indicator.close()
          this.pageTitle = '支付成功'
          this.resultInfo = {
            iconState: 1,
            price: '¥' + this.price + '元',
            isBtnEnable: true,
            btnText: '完成'
          }
          break
        case WAIT_PAY: // 待支付
        case PROCESSING: // 交易中
        default:
          if (this.searchTime < 4) {
            setTimeout(this.searchForResult, 300)
          } else {
            Indicator.close()
            this.pageTitle = '等待支付结果'
            this.resultInfo = {
              iconState: 0,
              text: '订单支付结果查询中…',
              isBtnEnable: true,
              btnText: '关闭'
            }
          }
          break
      }
    },
    close() {
      console.log('关闭')
      if (this.notifyUrl) {
        open(this.notifyUrl)
      } else {
        back()
      }
    }
  }
}
</script>

<style>
.mint-indicator-wrapper {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>
